import { ref, type Ref } from 'vue'
import { useIntersectionObserver } from './useIntersectionObserver'

/** 返回值类型 */
interface Return<T> {
  /** 视口监听器监听的目标对象 */
  target: Ref<Element | undefined>
  /** 响应回来的数据 */
  result: Ref<T[] | undefined>
}

/** 懒加载数据 */
export function useLazyData<R>(apiFn: () => Promise<any>): Return<R> {
  /** dom，监听目标元素 */
  const target = ref<Element>()

  /** 数据 */
  const result = ref<R[]>()
  console.log('target', target.value)
  /** 获取数据 */
  const { stop } = useIntersectionObserver(target as Ref<Element>, (isIntersecting) => {
    if (isIntersecting) {
      /** 停止监听 */
      stop()
      /** 调用接口函数获取数据 */
      apiFn()
        .then((res: R[]) => {
          console.log('res', res)
          result.value = res
        })
        .catch((error) => {
          console.log(error)
        })
    }
  })
  /** 一定要将target返回否则获取不了dom */
  return {
    result,
    target
  }
}
